<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
   </style>
</head>
<body> 
	 <div class="container" >
	 
		<div class="panel panel-default" id="app">
			  <div class="panel-body">
			  	    <h1>vue2.0 组件化开发</h1>
                   	<my-content  attr="组件一"  color="red"  style="border:1px solid #ccc; padding:10px; margin-bottom:10px;"></my-content> 
                   	<my-content  attr="组件二"  color="green" style="border:1px solid #ccc; padding:10px; margin-bottom:10px;"></my-content> 
                   	<my-content  attr="组件三"  color="blue" style="border:1px solid #ccc; padding:10px; margin-bottom:10px;"></my-content> 
			  </div>
		</div>		

		
	   <!-- HTML5 默认不会去显示template标签里的内容  这里仅供vue解析调用   -->
		<template id="my-content" >
	
		<div class="div-content"> <!-- template下的div.div-content不可有同级元素  因为div-content的同级元素不可被识别 -->
		<h3>{{ attr }}</h3> 
		 <p v-bind:style=" 'color :' + color" >QQ： {{ count }} </p>
		 <button v-on:click="userClick();">点击试试</button>
		 </div>
	
		</template>
		
	 </div>
	 

	 
</body>
</html>
<script>

 //PS: 组件化开发 需要定义完成 Vue.component之后再实例化 否则无法正常输出组件
 Vue.component('my-content', {
  template: '#my-content',
  props:["attr","color"],  //接收组件的独立属性值 每个独立属性在自定义标签里定义 
  data:  function(){    //组件化的值应该写在data的函数里 并作为返回值返回
	  return {
	  count : 421419567
	  }
  }, 
  methods:{      //组件化开发里的方法
 	 "userClick":function(){
 		 this.count += 1
 	 }
 },
 computed:{
	 
 }
});
 new Vue({
  el: '#app',
});


 
</script>


